<template>
    <div class="sub-main-content">
        <el-breadcrumb  separator="/">
            <el-breadcrumb-item><i class="el-icon-location-outline"></i>个人中心</el-breadcrumb-item>
            <el-breadcrumb-item>基本信息</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="sub-block user-info-block">
            <div class="user-photo">
                <img :src="userInfo.photoUrl">
            </div>
            <div class="user-info">
                <div class="user-info-row"><span class="title">登录账号:</span><span class="value">{{userInfo.account}}</span></div>
                <div class="user-info-row"><span class="title">手机号:</span><span class="value">{{userInfo.phone}}</span></div>
                <div class="user-info-row"><span class="title">邮箱号:</span><span class="value">{{userInfo.email}}</span></div>
            </div>
            <div class="user-info">
                <div class="user-info-row"><span class="title">登录角色:</span><span class="value">{{userInfo.role}}</span></div>
                <div class="user-info-row"><span class="title">注册时间:</span><span class="value">{{userInfo.registerTime}}</span></div>
            </div>
        </div>
        <div class="sub-block">
            <div class="block-title">修改个人资料</div>
            <div class="form-container">
                <el-form ref="userInfoForm" :model="userInfo" :rules="rules" label-width="120px" label-suffix='：'>
                    <el-form-item label="姓名">
                        <el-input v-model="userInfo.name"  placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="头像">
                        <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false">
                            <template v-if="userInfo.photoUrl" >
                                <img :src="userInfo.photoUrl" class="avatar">
                                <el-button size="mini" type="primary" plain>更换头像</el-button>
                            </template>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <template #tip>
                                <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
                            </template>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model.number="userInfo.phone"  placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱地址">
                        <el-input v-model="userInfo.email"  placeholder="请输入邮箱地址"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('userInfoForm')">立即提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
    setup () {
        let userInfo = reactive({
            account:'Chen0812',
            name: '',
            phone: '18391066870',
            email: '18391066870@163.com',
            role: '超级管理员',
            registerTime: '2021-08-12 16:23:44',
            photoUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        })
        function submitForm(formName:string) {
            console.log(formName)
        }
        return {
            userInfo,
            rules:{
                phone: [
                    { type: 'number',  message: '请输入正确的手机号码', trigger: 'blur' }
                ],
            },
            submitForm
        }
    }
})
</script>

<style scoped lang="scss">
.user-info-block{
    display: flex;
    padding: 30px 40px;
    .user-photo{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: #f1f1f1 solid 1px;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
}
.user-info{
    margin-left: 50px;
    .user-info-row{
        margin: 14px 0;
        .title{
            display: inline-block;
            width: 60px;
            margin-right: 8px;
            color: #999;
        }
        .value{
            display: inline-block;
            color: #333;
        }
    }
}

</style>